<template>
    <div>
        <div class="searchContent">
            <van-search
                v-model="keyword"
                shape="round"
                show-action
                background="#4873c1"
                placeholder="请输入搜索关键词"
                @search="getImgList('search')"
                @clear="getImgList('search')"
                @gofocus='gofocus'
            >
                <template #action>
                    <div @click="getImgList('search')" class="colorfff">搜索</div>
                </template>
            </van-search>
        </div>
        <div class="changeContent whiteBg flex flexCenter alignCenter mb10 relative" >
            <div class="fontSize15 color666 tagTitle" @click="goCheckNav">
                {{tagName==''?'筛选标签':tagName}}
            </div>
            <img src="../../assets/image/sx.png">
            <img src="../../assets/image/clearIcon.png" class="clearIcon" @click="getImgList('search')" />
        </div>
        <!-- <div class="wd100 flex whiteBg flexAround choiceContent fontSize15">
            <div class="titleSty relative">
                <div class=" fontSize16 fontbold mb10"></div>
                <div class="mb10 center flex flexCenter alignCenter">
                    <div class="fontSize12 color999 mr10">当前选择</div>
                    <div class="fontSize18 flex" v-for="(item,index) in checkNav" :key="index" @click="goCheckNav(item,index)"> 
                        <span style="color:#4873c1"> {{item.name}} </span>
                         <div class="color999" style="margin:0 0.1rem"> > </div> 
                    </div>
                </div>
                <div v-if="isUp">
                    <div style="margin:0 0.4rem;height:3.6rem">
                        <div class="mt10 fontSize16 scrollList" v-if="classificateList.length>0">
                            <div class="flex alignCenter" style="padding:0.3rem 0" v-for='(item,index) in classificateList' :key='index' @click="goCheck(item)">
                                <img class="wd100" style="margin-right:0.1rem" src="../../assets/image/folder.png" >
                                <span>{{item.name}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="saveClassificate wd100 mt20" v-if="checkNav.length>0">
                        <div class="flex wd100" style="justify-content: flex-end;">
                            <div class="sameBtn center mr10" @click="cancelBtn">重置</div>
                            <div class=" sameBtn center sureBtn" @click="goCheckSave">确定</div>
                        </div>
                        
                    </div>
                </div>
                <div class="rotateUpIcon color999 mt10" @click="goUp">{{isUp?'收起':'展开'}} <span class="arrowStyle arrowBgccc" :class='{"rotateUp topS":isUp,"rotateDown top0":!isUp}'></span></div>
            </div>
        </div> -->
        <div class="listContent" v-if="imgList.length>0">
            <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                
            </van-pull-refresh> -->
            <van-list
                v-model="loading"
                :finished="finished"
                :finished-text="finishedTxt"
                :immediate-check='false'
                offset=20
                @load="goPullup"
                class="vantList"
            >
                <div v-for="(item,index) in imgList" class="imgList center" :key='index'>
                    <div class="box">
                        <van-image v-if="item.type==1" width='100' height="120" lazy-load fit='cover' :src="item.thumbnail" @click.stop="goShowImg(item.path)"/>
                         <!-- <van-image v-if="item.type==1" @click="goSeeVideo(item)" width='100' height="120" lazy-load fit='cover' src="../../assets/image/videoBg.png"></van-image> -->
                         <!-- <img v-if="item.type==2" :src="item.video_cover" class="disInline" style="width:2rem" @click="goSeeVideo(item)"/> -->
                        <div v-if="item.type==2" class="relative"  @click="goSeeVideo(item)">
                            <van-image  width='100' height="120" lazy-load fit='cover' :src="item.video_cover"></van-image>
                            <img src="../../assets/image/videoIcon.png" class="videoSty" />
                        </div>
                        
                        <div class="fontSize12 tagsColor">{{item.tag}}</div>
                        <div class="flex alignCenter flexAround fontSize12 mt5">
                            <div class="miniBtn" @click="goSingleCheck(index,item.checked,item.type)" :class="{'grayBorder':!item.checked,'checkBorder':item.checked}">选中</div>
                            <div class="miniBtn grayBorder" @click.stop="goSeeRelation(item.id,item.graphics)">详情</div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <div class="center color999" style="margin-top:2rem" v-if="imgList.length==0">暂无数据</div>
        <div class="footer" v-if="isSave">
            <div class="flex flexBetween btmSty alignCenter">
                <div class="saveBtn center" @click="goSave">发送</div>
            </div>
            
        </div>
        <van-popup class="relationList" v-model="isRelation" round closeable
            close-icon-position="top-right"
            position="bottom"
            :style="{ height: '80%' }" >
            <div class="psty">
                <div class="fontbold fontSize16 mb10">查看相关图文信息</div>
                <div class="whiteBg box mb10 relative" v-for="(item,index) in imgScrList" :key='index'>
                    <img src="../../assets/image/copyIcon.png" :data-clipboard-text="item.text" @click="copy" class="copyImg tag-read">
                    <p class="fontSize14 mb10" v-html="item.text" ></p>
                    <div class="flex" style="flex-wrap:wrap">
                        <div v-for="(e,v) in item.image" :key="v" class="detailBox center mb10">
                            <!-- <img class="detailImg" v-for="(e,eindex) in item.image" :key="eindex" :src="e.path" @click.stop="goShowImgList(index)"> -->
                            <!-- <van-image class="mr10" v-for="(e,eindex) in item.image" :key="eindex" lazy-load width='68' height="84" fit='cover' :src="e.thumbnail" @click.stop="goShowImgList(index)"/> -->
                            <van-image v-if="e.type==1" lazy-load width='90' height="84" fit='cover' :src="e.thumbnail" @click.stop="goShowImgList(index,v)"/>
                            <div v-if="e.type==2" class="relative"  @click="goSeeVideo(e)">
                                <van-image  width='100' height="120" lazy-load fit='cover' :src="e.video_cover"></van-image>
                                <img src="../../assets/image/videoIcon.png" class="videoSty" />
                            </div>

                            <!-- <img v-if="e.type==2" :src="e.video_cover" class="disInline" style="width:2rem" @click="goSeeVideo(e)"/> -->
                            <!-- <van-image v-if="e.type==2" lazy-load width='90' height="84" fit='cover' src="https://erp.ellassay.com/uploads/20220808/compression_quality_0ebbd046f5b705f9ee2e3d80e5c759b2.jpg" @click="goSeeVideo(e)" /> -->
                            <div class="fontSize12 tagsColor">{{e.tag}}</div>
                            <div class="flex flexCenter mt10"><div class="miniBtn grayBorder fontSize12" @click="goDetailCheck(index,v,e)" :class="{'grayBorder':!e.checked,'checkBorder':e.checked}">选中</div></div>
                        </div>
                    </div>
                    <div class="footer" v-if="isDetailSave">
                        <div class="flex flexBetween btmSty alignCenter">
                            <div class="saveBtn center" @click="goSave">发送</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </van-popup>
        <van-popup v-model="isTags" round closeable class="tagsList whiteBg"
            close-icon-position="top-right"
            position="bottom"
            :style="{ height: '80%' }" >
            <div class="psty">
                <div class="fontbold fontSize16 mb10">选择标签</div>
                <div class="mt20 conterTag">
                    <!-- <div v-for="(item,index) in tagList" :key="index" class="tagItem flex alignCenter color666 mb10" @click="goCheckTag(index,item.checked)" :class='{"color666 borderGray":!item.checked,"checkTagsBg colorfff":item.checked}'>
                        {{item.name}}
                    </div> -->
                    <div v-for="(item,index) in tagList" :key="index" class="mb10">
                        <div class="fontSize16 tagDetialTitle mb10 colorBlue fontbold">{{item.name}}</div>
                        <div class="flex" style="flex-wrap:wrap">
                            <div v-for="(e,elindex) in item.child" :key="elindex" class="tagItem flex alignCenter color666 mb10" :class='{"color666 borderGray":!e.checked,"checkTagsBg colorfff":e.checked}' @click="goCheckTag(index,elindex,e.checked)">{{e.name}}</div>
                        </div>
                    </div>
                </div>
                <div class="saveClassificate wd100">
                    <div class="flex flexCenter wd100 fontSize14">
                        <div class="sameBtn center" @click="cancelBtn">重置</div>
                        <div class=" sameBtn center sureBtn" @click="goCheckSave">确定</div>
                    </div>
                </div>
            </div>
        </van-popup>
        <div class="videoMask" v-if="isMask" @click="goClose">
            <div class="posicenter wd100">
                <video :src="videoVal" controls style='width:100%' object-fit="cover" muted autoplay></video>
                <div class="flex flexCenter"><span class="closeVideoBtn">关闭</span></div>
            </div>
            
        </div>
    </div>
</template>
<script>
import { Toast,ImagePreview,lazyLoad } from 'vant' //https://erp.ellassay.com/uploads/20220613/2f05f8be74503428c5b7b78b3989b92b.mp4
import Clipboard from 'clipboard'
// import VConsole from 'vconsole';
// const vConsole = new VConsole();
export default{
    data(){
        return{
            isMask:false,
            refreshing:false,
            isTags:false,
            loading:true,
            finished:false,
            finishedTxt:'没有更多了',
            isWx:true,
            imgList:[],
            isClassificate:false,
            keyword:'',
            pid:'',
            page:1,
            cascaderValue:'',
            // classificateList:[{name:'新款',id:1},{name:'旧款',id:1}]
            classificateList:[],
            classificateInfo:{},
            checkNav:[],
            checkVal:'',
            isRelation:false,
            imgScrList:[],
            isSave:false,
            isUp:true,
            tagList:[],
            tagId:'',
            tagName:'',
            type:1,//视频还是图片
            videoVal:'',
            isDetailSave:false
        }
    },
    created(){
        var ua = navigator.userAgent.toLowerCase()
        if(ua.match(/wxwork/i) == 'wxwork'){
            console.log('在企业微信环境内')
            this.isWx=true
            this.getWxInfo()
        }else{
            console.log('不在企业微信环境内')
            this.isWx=false
        }
        
        // this.getCategoryList()
        this.getImgList('')
        this.getTagList()
    },
    methods:{
        getWxInfo(){//获取微信配置项
            let that=this
            let url = `${window.location.href}`
            let obj={url:url}
            this.$apiRequest.getWxInfo(obj).then(r=>{
                console.log('获取微信信息',r)
                if(r.code==1){
                    let info=r.data
                    wx.config(info.config);
                    wx.ready(()=> {
                        wx.agentConfig({
                            corpid: info.agentConfig.corpid, 
                            agentid: info.agentConfig.agentid, 
                            timestamp: info.agentConfig.timestamp, // 必填，生成签名的时间戳
                            nonceStr: info.agentConfig.nonceStr, // 必填，生成签名的随机串
                            signature: info.agentConfig.signature,// 必填，签名，见附录-JS-SDK使用权限签名算法
                            jsApiList: info.agentConfig.jsApiList, //必填，传入需要使用的接口名称
                            success: function(res) {
                                console.log('agentConfig成功',res)
                                // 回调
                                // alert('成功来啦啦啦')
                            },
                            fail: function(res) {
                                console.log('agentConfig失败',res)
                                if(res.errMsg.indexOf('function not exist') > -1){
                                    // alert('版本过低请升级')
                                }
                            }
                        });
                    })
               
                }
            })
        },
        getCategoryList(id){
            let obj={pid:id!==undefined?id:''}
            console.log('分类参数',obj)
            this.$apiRequest.getCategoryList(obj).then(res=>{
                console.log('分类列表',res)
                let data=res.data
                if(res.code==1){
                    this.classificateInfo=data
                    this.classificateList=data.page.data
                }   
                
            })
        },
        getImgList(type){
            Toast.loading({
                message: '加载中',
                forbidClick: true,
            })
            // type=='search'?this.page=1:''
            if(type=='search'){
                console.log('type是search啦啦啦')
                this.loading = true
                this.finished=false
                this.page=1
                this.tagId='',
                this.tagName=''
                this.tagList.map(i=>{
                    i.child.map(e=>{
                        e.checked=false
                    })
                    
                })
                //this.$forceUpdate()
            }
            let obj={
                keyword:this.keyword,
                // category_id:this.pid,
                page:this.page,
                tag:this.tagId
            }
            console.log('图片参数',obj)
            this.$apiRequest.getImgList(obj).then(res=>{
                console.log('图片列表',res)
                this.loading = false
                Toast.clear()
                let list=res.data.data
                list.map(i=>{
                    i.checked=false
                })
                if(list.length===0){
                  this.page==1?this.imgList=[]:''
                  this.page==1?this.finishedTxt='':''
                  this.finished=true
                  return 
                }
                if(this.page==1){
                    this.imgList=list
                    this.finishedTxt=''
                }else{
                    this.imgList=this.imgList.concat(list)
                }
            })
        },
        getTagList(){
            this.$apiRequest.getTagList({}).then(res=>{
                console.log('获取标签列表',res)
                if(res.code==1){
                    res.data.map(i=>{
                        i.child.map(e=>{
                            e.checked=false
                        })
                        
                    })
                    this.tagList=res.data
                }
            })
        },
        // clearList(){
        //     this.page=1
        //     this.tagId='',
        //     this.tagName=''
        //     this.getImgList('')
        //     this.getTagList()
        // },
        onRefresh(){
            this.refreshing=false
            this.pid=''
            this.keyword=''
            this.getImgList('search')
            this.getTagList()
        },
       copy () {
            var clipboard = new Clipboard('.tag-read')
            clipboard.on('success', e => {
                console.log('复制成功')
                Toast.success('文本复制成功')
                //  释放内存
                clipboard.destroy()
            })
                clipboard.on('error', e =>{
                // 不支持复制
                console.log('该浏览器不支持复制')
                Toast.success('文本复制失败')
                // 释放内存
                clipboard.destroy()
            })
        },
        goCheckTag(index,elindex,checked){
            this.tagList[index].child[elindex].checked = !checked
            // this.tagList[index][elindex].checked = !checked
        },

        goChange(){
            this.isClassificate=true
        },
        // goCheck(info){
        //     console.log('点击目录',info)
        //     this.pid=info.id
        //     this.getCategoryList(info.id)
        //     this.checkNav.push(info)
        // },
        // goCheckNav(info,index){
        //     console.log('点击导航',info)
        //     this.checkNav.length= (index+1)
        //     this.pid=info.id
        //     this.getCategoryList(info.id)
        // },
        goCheckNav(){
            this.isTags=true
        },
        goCheckSave(){
            let newIdArr=[]
            let newNameArr=[]
            this.tagList.map(i=>{
                i.child.map(e=>{
                    if(e.checked){
                        newIdArr.push(e.id)
                        newNameArr.push(e.name)
                    }
                })
                
            })
            // if(newIdArr.length==0){//没有选中标签
            //     Toast('请选择标签')
            //     return
            // }
            // console.log('newIdArr',newIdArr)
            this.tagId=newIdArr.join(',')
            this.tagName=newNameArr.join('/')
            this.page=1
            this.loading = true
            this.finished=false
            this.isTags=false
            this.getImgList()
            
        },
        cancelBtn(){
            this.pid=''
            this.keyword=''
            this.checkVal=''
            this.checkNav=[]
            this.tagId='',
            this.tagName=''
            this.page=1
            // this.isTags=false
            this.tagList.map(i=>{
                i.child.map(e=>{
                    e.checked=false
                })
            })
            this.$forceUpdate()
            // this.getCategoryList('')
            this.getImgList()
        },
        goSingleCheck(index,checked,type){//单个选择
            this.type=type
            this.imgList.map(i=>{
                i.checked=false
            })
           this.imgList[index].checked= !checked
           this.$forceUpdate()
           let checkList=[]
           this.imgList.map(i=>{
                if(i.checked){
                    checkList.push(i)
                }
           })
           checkList.length>0?this.isSave=true:this.isSave=false
        },
        goDetailCheck(index,v,info){//详情内点选择
            console.log('点击详情的选中---------',info)
            this.type=info.type
            this.imgScrList[index].image.map(i=>{
                i.checked=false
            })
            this.imgScrList[index].image[v].checked = !info.checked
            this.$forceUpdate()
            let checkList=[]
           this.imgScrList.map((i,v)=>{
                if(v==index){
                    i.image.map(e=>{
                        if(e.checked){
                            checkList.push(e)
                        }
                    })
                }
           })
           checkList.length>0?this.isDetailSave=true:this.isDetailSave=false
        },
        goShowImg(url){
            console.log('点击了',url)
            ImagePreview([url])
        },
        goShowImgList(index,v){
            let imgList=[]
            let list=this.imgScrList[index].image
            list.map(i=>{
                imgList.push(i.path)
            })
            ImagePreview({images:imgList,startPosition:v})
        },
        goSeeRelation(id,len){//查看图片相关
            if(len.length==0){
                Toast('图文详情不存在')
                return
            }
            let obj={graphics_id:id}
            this.$apiRequest.getImgInfo(obj).then(res=>{
                console.log('获取图文详情',res)
                if(res.code==1){
                    res.data.map(i=>{
                        i.image.map(e=>{
                            e.checked=false
                        })
                    })
                    this.imgScrList=res.data
                    this.isRelation=true

                }else{
                    Toast(res.msg)
                }
            })
        },
        gofocus(){
            this.isSave=false
            this.tagName=''
            this.tagId=''
            
            this.imgList.map(i=>{
                i.checked=false
           })
            this.loading = true
            this.getTagList()
            //    this.page=1
            //    this.getImgList()
            //    this.getTagList()
            this.$forceUpdate()
        },
        goPullup(){//上拉
            console.log('上拉啦啦啦啦')
            this.page++
            this.getImgList()
        },
        goUp(){
            this.isUp= !this.isUp
        },
        goSave(){
            let that=this
           let checkedList=[]
           if(!this.isRelation){
                this.imgList.map(i=>{
                    if(i.checked){
                        checkedList.push(i)
                    }
                })
           }else{
                this.imgScrList.map(i=>{
                    i.image.map(e=>{
                        if(e.checked){
                            checkedList.push(e)
                        }
                    })
                })
           }
            let id=''
            checkedList.map(i=>{
                i.checked==true?id=i.id:''
            })
            if(checkedList.length==0){
                Toast.fail('请勾选图片/视频')
                return
            }
            let obj={id:id}
            Toast.loading({
                message: '发送中',
                forbidClick: true,
                overlay:true
            })
            this.$apiRequest.getMediaId(obj).then(res=>{
                console.log('获取媒体id',res)
                if(res.code==1){
                    if(that.type==1){
                        wx.invoke('sendChatMessage', {
                            msgtype:"image", //消息类型，必填
                            // enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
                            // text: {
                            //     content:"你好", //文本内容
                            // },
                            image:
                            {
                                mediaid:res.data //mediaid: "33GC0KACsAm4oYmbtHhuYLVHEnsU2nfrlQFeQpJErhskkPnQd4z59-b7LKr8Hu-gc", //图片的素材id
                            },

                        }, function(res) {
                            Toast.clear()
                            if (res.err_msg == 'sendChatMessage:ok') {
                                console.log('发送成功',res)
                            }else{
                                console.log('发送失败',res)
                            }
                        })
                    }
                    if(that.type==2){
                        wx.invoke('sendChatMessage', {
                            msgtype:"video", //消息类型，必填
                            video:
                            {
                                mediaid: res.data, //视频的素材id
                            },
                        }, function(res) {
                            if (res.err_msg == 'sendChatMessage:ok') {
                                //发送成功
                                console.log('视频发送成功',res)
                            }else{
                                console.log('视频发送失败',res)
                            }
                        })
                    }
                    
                }else{
                    Toast.clear()
                    Toast(res.msg)
                }

            })
        },
        onFinish(){

        },
        goSeeVideo(info){
            this.videoVal=info.path
            this.isMask=true
        },
        goClose(){
            this.isMask=false
            this.videoVal=''
        }
    }
}
</script>
<style lang='less' scoped>
.van-col{text-align: center;}
.wrapper{background-color: #f1f1f1 !important;}
.mr5{margin-right: 0.1rem;}
// .choiceContent{
//     margin-bottom: 0.1rem;
//     img{
//         width: 0.4rem;
//         height: 0.34rem;
//     }
// }
.changeContent{
    padding: 0.2rem 0;
    .tagTitle{
        margin-right: 0.1rem;
        max-width: 4rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .clearIcon{
        position: absolute;
        right: 0.2rem;
        top: 50%;
        transform: translateY(-50%);
    }
    img{
        width: 0.34rem;
        height: 0.34rem;
    }
}
.listContent{
    // width: 90%;
    // margin: 0 auto;
    padding:0 0.2rem 1.4rem 0.2rem;
    .imgList{
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        margin-right: 1.2%;
        padding-bottom: 0.12rem;
        .box{
            background-color: #fff;
            padding: 0.2rem 0;
            border: 1px #eee solid;
            border-radius: 0.1rem;
        }
        .imgSty{
            height: 3rem;
            object-fit: cover;
        }
        
    }
}
.miniBtn{
    border-radius: 0.06rem;
    width: 1rem;
    height: 0.5rem;
    line-height: 0.5rem;
}
.grayBorder{border:1px #eee solid;}
.checkBorder{background-color: #4873c1;color: #fff;}
.tagsColor{color: #dd6605;}
.checkTagsBg{background-color: #dd6605;}
.videoMask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 999999;
    .posicenter{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .closeVideoBtn{
        color: #fff;
        border: 1px #fff solid;
        padding: 0.2rem 1rem;
        border-radius: 0.2rem;
        margin-top: 1rem;
    }
}
.videoSty{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.tagsList{
    .psty{
        padding: 0.2rem 0.3rem;
    }
    .conterTag{
        flex-wrap: wrap;
        height: 8rem;
        overflow-y: scroll;
        .tagDetialTitle{
            padding: 0.2rem 0;
            border-bottom: 1px #eee solid;
        }
    }
    .tagItem{
        border: 1px #eee solid;
        padding: 0.14rem 0.4rem;
        border-radius: 0.1rem;
        margin-right: 0.2rem;
    }
    .borderOrange{border:1px #dd6605 solid}
    .borderGray{border:1px #eee solid}

}
.footer{
    position: fixed;
    left: 0;
    bottom: 0; 
    width: 100%;
    // background: #fff;
    background-color: rgba(83,114,192,0.1);
    padding: 0.2rem 0;
    .btmSty{
        width: 64%;
        margin: 0 auto;
    }
}
.saveBtn{
    width: 100%;
    background-color: #4873c1;
    color: #fff;
    padding: 0.2rem 1rem;
    border-radius: 0.4rem;
}
.titleSty{
    width: 90%;
    margin: 0.2rem auto;
    border-radius: 0.1rem;
    .scrollList{
        height: 3.6rem;
        overflow: scroll;
        background-color: rgba(0,0,0,.01);
        padding: 0 0.2rem;
    } 
    .rotateUpIcon{
        text-align: center;
        font-size: 12px;
        .arrowStyle {
            position: relative;
            top: 0.06rem;
            margin-left: 0.04rem;
        }
        .topS{top:0.06rem}
        .top0{top:0}
    }   
}
.saveClassificate{
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    .sameBtn{
        width: 2.4rem;
        border:1px #ddd solid;
        height: 0.8rem;
        line-height: 0.8rem;
        border-radius: 0.6rem;
    }
    .sureBtn{
        color: #4873c1;
        border:1px #4873c1 solid;
        margin-left: 0.6rem;
        // margin-left: 0.6rem;
    }
}
.circleSty{
    width:0.76rem;
    height: 0.42rem;
    border-radius: 50%;
    border:1px #ddd solid;
    margin-right: 0.2rem;
}
.activeCheck{
    width: 0.46rem;
    height: 0.46rem;
    margin-right: 0.2rem;
}
.relationList{
    background-color: #f6f6f6;
    .psty{
        padding: 0.2rem 0.3rem;
        .box{
            padding: 0.4rem;
            border-radius: 0.1rem;
        }
        .copyImg{
            position: absolute;
            top: 0;
            right: 0;
            width: 0.5rem;
            height: 0.5rem;
        }
        .detailBox{
            border: 1px #eee solid;
            padding: 0.2rem 0;
            width: 32%;
            border-radius: 0.1rem;
            margin-right: 0.06rem;
        }
    }
}
// .detailImg{
//     width:32%;
//     display:inline-block;
//     height: 2.6rem;
//     object-fit: cover;
//     margin-right: 0.06rem;
// }
</style>
<style>
.vantList{
    column-count:3;
    -moz-column-count:3; 
    -webkit-column-count:3; 
    column-gap:0.06rem;
    /* overflow-y: auto; */
}
@media screen and (min-width:760px){
    .vantList{
        column-count:4;
        -moz-column-count:4; 
        -webkit-column-count:4; 
        column-gap:0.06rem
    }
    .relationList .psty .detailBox{
        width: 22% !important;
    }
    /* .van-image{width: 120px !important;height: 140px !important;} */
}
</style>